<template>
	<view>
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left" @click="to_info">
				<image :src="userInfo.avatar_url"></image>
			</view>
			<!-- 昵称,个性签名 -->
			<view class="right" @click="to_info">
				<view class="username">{{userInfo.nick_name}}</view>
			</view>
			<view>
				<u-icon name="share" size="40" color="#FFFFFF" style="margin-right: 20rpx;"
				@click="share"></u-icon>
			</view>
		</view>
		<view class="coin">
			<u-grid :col="2" :border="false">
				<u-grid-item>
					<text>{{userInfo.gold_coin}}</text>
					<view class="grid-text">金币</view>
				</u-grid-item>
				<u-grid-item>
					<text>{{userInfo.study_coin}}</text>
					<view class="grid-text">学习币</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 工具栏 -->
		<view class="toolbar">
			<view class="title">我的记录</view>
			<view class="list">
				<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @click="to_page(row.url)">
					<view class="img">
						<image :src="row.img"></image>
					</view>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
		</view>
		<view class="toolbar_setting">
			<u-cell-item icon="share" title="分享给好友" @click="share"></u-cell-item>
			<u-cell-item icon="setting-fill" title="设置" @click="to_setting"></u-cell-item>
		</view>
		<u-tabbar v-model="current" :list="this.$tabBarList" :mid-button="true"
		active-color="#65a4f8" inactive-color="#b9b9b9"></u-tabbar>
		<uni-popup ref="sharepopup" type="bottom">
			<share-btn :sharedataTemp="sharedata"></share-btn>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['uerInfo']),
		data() {
			return {
				userInfo: {
					avatar_url: '',
					nick_name: '',
					gold_coin:0,
					study_coin:0
				},
				current: 4,
				// 工具栏列表
				mytoolbarList:[
					{url:'col',text:'我的收藏',img:'/static/my/col.png'},
					{url:'class',text:'我的课程',img:'/static/my/class.png'},
					{url:'order',text:'我的订单',img:'/static/my/order.png'},
					// {url:'',text:'下载缓存',img:'/static/my/cache.png'},
					{url:'promoter',text:'分销中心',img:'/static/my/promoter.png'},
				],
				sharedata:{
					strShareUrl:this.$download_path,
					strShareTitle:`${this.$title}`,
					strShareSummary:'',
					strShareImageUrl:this.$share_image_path
				}
			}
		},
		onShow() {
			this.get_user_info();
		},
		mounted() {
			this.sharedata.strShareUrl += this.uerInfo.uid;
			this.get_user_info();
		},
		methods: {
			to_setting() {
				uni.navigateTo({
					url:'setting'
				})
			},
			share(){
				this.$refs.sharepopup.open();
			},
			get_user_info(){
				uni.request({
					url:`${this.$serverUrl}/userinfo`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"uid": this.uerInfo.uid,
						"token": this.uerInfo.token
					},
					method: "GET",
					success: (e) => {
						if(e.data.status == 200){
							this.userInfo.avatar_url = e.data.data.avatar;
							this.userInfo.nick_name = e.data.data.nickname;
							this.userInfo.gold_coin = e.data.data.now_money;
							this.userInfo.study_coin = e.data.data.integral;
						}else{
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					},
					complete: () => {
					}
				})
			},
			to_info(){
				uni.navigateTo({
					url:'info'
				})
			},
			to_page(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.place{
		background-color: #65a4f8;
		height: 30upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.user{
		padding: 0 6%;
		display: flex;
		align-items: center;
		// position: relative;
		background-color: #65a4f8;
		padding-bottom: 50upx;
		.left{
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border-radius: 100%;
			image{
				width: 20vw;
				height: 20vw;
				border: 5rpx solid #fff;
				border-radius: 100%;
			}
			
		}
		.right{
			width: 100%;
			.username{
				font-size: 36upx;
				color: #fff;
			}
			.signature{
				color: #fff;
				font-size: 28upx;
			}
		}
		.erweima{
			flex-shrink: 0;
			width: 10vw;
			height: 10vw;
			margin-left: 5vw;
			border-radius: 100%;
		
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, #fbbb37 0%,#fcf0d0 105%);
			.icon{
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}
	.toolbar{
		width: 92%;
		margin: 30rpx 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
		.title{
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			.box{
				width: 25%;
				margin-bottom: 30upx;
				.img{
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;
					
					image{
						width: 9vw;
						height: 9vw;
					}
				}
				.text{
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}
	.toolbar_setting {
		width: 92%;
		margin: 30rpx 4% 0 4%;
		padding: 0 0 0 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
	}
	.coin {
		width: 92%;
		margin: 30rpx 4% 0 4%;
		padding: 0 0 0 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		border-radius: 15upx;
	}
</style>
